<template>
	<view>
		<view class="dis-title">
			<text class="tag">#</text>
			<text class="title">{{ discussInfo.title }}</text>
		</view>
		<view class="discussInfo">
			<view class="count">
				<text>{{ discussInfo.post_num }} 篇内容</text>
				<text>{{ discussInfo.see_num }} 次浏览</text>
				<navigator style="display: inline-block; margin-left: 20rpx" :url="'/pages/topic/index?topic_id=' + topicInfo.id" hover-class="none">
					来源于【
					<text style="color: #616161; font-weight: bold">{{ topicInfo.name }}</text>
					】圈子
				</navigator>
			</view>
			<view class="discuss-desc">{{ discussInfo.introduction }}</view>
		</view>
		<q-post-list :list="postList" :loadStatus="loadStatus"></q-post-list>
		<!-- 发布帖子按钮 -->
		<view v-if="topicInfo.id" @click="handelAdd(`/pages/post/add?topic_id=${topicInfo.id}&dis_id=${discussInfo.id}`)" class="plus-btn">
			<u-icon name="plus" color="#fff"></u-icon>
			<text class="text">发布动态</text>
		</view>
		<!-- 加入圈子弹窗 -->
		<u-modal
			:show="joinTopicModel"
			:show-cancel-button="true"
			@cancel="joinTopicModel = false"
			confirm-text="加入圈子"
			:content="'是否加入【' + topicInfo.name + '】?'"
			@confirm="joinTopic"
		></u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			discussId: '',
			loadStatus: 'loading',
			postList: [],
			discussInfo: {},
			page: 1,
			topicInfo: {},
			joinTopicModel: false
		};
	},
	onLoad(options) {
		this.discussId = options.id;
		this.getDiscussInfo();
	},
	onShareAppMessage(res) {
		if (res.from === 'button') {
			// 来自页面内分享按钮
			console.log(res.target);
		}
		return {
			title: this.discussInfo.title,
			path: '/pages/discuss/detail?title=' + this.discussInfo.title
		};
	},
	onShareTimeline() {
		let imgURL = '';
		return {
			title: this.discussInfo.title,
			imageUrl: imgURL,
			query: 'title=' + this.discussInfo.title
		};
	},
	methods: {
		joinTopic() {
			this.$H
				.post('topic/joinTopic', {
					id: this.topicId
				})
				.then((res) => {
					if (res.code === 1) {
						this.topicInfo.is_join = true;
						this.joinTopicModel = false;
					}
				});
		},
		getTopicInfo(topic_id) {
			this.$H
				.get('topic/detail', {
					id: topic_id
				})
				.then((res) => {
					if (res.code == 1) {
						this.topicInfo = res.result;
					}
				});
		},
		handelAdd(url) {
			if (this.$store.state.hasLogin) {
				if (this.topicInfo.is_join) {
					uni.navigateTo({
						url
					});
				} else {
					this.joinTopicModel = true;
				}
			} else {
				uni.navigateTo({
					url: '/pages/user/login'
				});
			}
		},
		getDiscussInfo() {
			this.$H
				.get('discuss/infoById', {
					id: this.discussId
				})
				.then((res) => {
					this.discussInfo = res.result;
					this.getTopicInfo(res.result.topic_id);
					this.getPostList();
				});
		},
		getPostList() {
			this.loadStatus = 'loading';
			this.$H
				.post('post/list', {
					discuss_id: this.discussId,
					page: this.page
				})
				.then((res) => {
					this.postList = this.postList.concat(res.result.data);

					if (res.current_page === res.last_page || res.last_page === 0) {
						this.loadStatus = 'nomore';
					} else {
						this.loadStatus = 'loadmore';
					}
				});
		}
	}
};
</script>
<style>
page {
	background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
.dis-title {
	display: flex;
	align-items: center;
	background-color: #fff;
	padding: 30rpx 30rpx 0 30rpx;
	line-height: 1;

	.tag {
		display: inline-flex;
		justify-content: center;
		align-items: center;
		width: 45rpx;
		height: 45rpx;
		border-radius: 50%;
		background-color: #000;
		color: #fff;
		font-weight: bold;
		margin-right: 10rpx;
		font-size: 24rpx;
	}

	.title {
		font-weight: bold;
		color: #000000;
		font-size: 38rpx;
	}
}

.discussInfo {
	padding: 20rpx;
	margin-bottom: 20rpx;
	background-color: #fff;
	align-items: center;
}

.avatar {
	margin-right: 10rpx;
}

.count {
	font-size: 12px;
	color: #999;
	margin-bottom: 10rpx;
}

.count text {
	margin: 0 10rpx;
}

.discuss-desc {
	color: #616161;
}

.handle-close {
	display: flex;
	justify-content: center;
	margin-bottom: 50rpx;
}

.plus-btn {
	position: fixed;
	bottom: 50rpx;
	background-color: $themes-color;
	display: flex;
	align-self: center;
	justify-content: center;
	border-radius: 100rpx;
	line-height: 1;
	padding: 20rpx 40rpx;
	margin-left: 38%;
	font-size: 28rpx;
	color: #fff;

	.text {
		margin-left: 10rpx;
	}
}
</style>
